<template>
  <view class="container">
    <titleBar :titleText='"交易记录"' :pageForm='"index"'></titleBar>
    <view class='details'>

      <view class="uni-padding-wrap uni-common-mt">
        <uni-segmented-control :current="type" :values="items" style-type="button" active-color="#007aff"
                               @clickItem="changeType"/>
      </view>
      <view class="content">
        <view v-if="type === 0">


          <u-cell-group>

            <u-cell-item
                v-for="item in dataList"
                :key="item.id"
                :arrow="false"
                :center="true"
                :label="item.add_time"
                :title="item.remark"
                :value="getFormattedNum(item.num)"
                :value-style="{'color':item.num<0 ?'green':'red'}"
            ></u-cell-item>
            <view style="color: grey;text-align: center;" v-if="loadend" class="bottom-message">
              <text>我是有底线的</text>
            </view>
          </u-cell-group>


        </view>
        <view v-if="type === 1">
          <u-cell-group>

            <u-cell-item
                v-for="item in dataList"
                :key="item.id"
                :arrow="false"
                :center="true"
                :label="item.add_time"
                :title="item.remark"
                :value="getFormattedNum(item.num)"
                :value-style="{'color':item.num<0 ?'green':'red'}"
            ></u-cell-item>
            <view style="color: grey;text-align: center;" v-if="loadend" class="bottom-message">
              <text>我是有底线的</text>
            </view>
          </u-cell-group>
        </view>
        <view v-if="type === 2">
          <u-cell-group>

            <u-cell-item
                v-for="item in dataList"
                :key="item.id"
                :arrow="false"
                :center="true"
                :label="item.add_time"
                :title="item.remark"
                :value="getFormattedNum(item.num)"
                :value-style="{'color':item.num<0 ?'green':'red'}"
            ></u-cell-item>
            <view style="color: grey;text-align: center;" v-if="loadend" class="bottom-message">
              <text>我是有底线的</text>
            </view>
          </u-cell-group>
        </view>
      </view>


    </view>

  </view>
</template>

<script>


import titleBar from '@/components/backTitlebar.vue';

export default {
  components: {
    titleBar
  },

  data() {
    return {
      items: ['全部', '消费', '收入'],
      loading: false,
      loadend: false,
      page: 1,
      limit: 10,
      type: 0,
      dataList: [],
      times: [],
    };
  },

  onShow() {

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getData()
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("已滚动到底部");
    this.getData();
  },
  methods: {
    getFormattedNum(num) {
      if (num > 0) {
        return "+" + num;
      }
      return num;
    },
    getData: function () {
      let that = this;
      if (that.loading) return;
      if (that.loadend) return;
      that.loading = true;
      that.loadTitle = '';
      this.$http.get('union/api.balance/log_credit', {
        page: that.page,
        limit: that.limit,
        type: that.type
      }, true).then(res => {
        that.dataList = that.page === 1 ? res.data : that.dataList.concat(res.data);

        that.loadend = res.data.length < that.limit;
        that.page += 1;
        that.loading = false;
      }).catch(err => {
        that.loading = false;
      })
    },
    /**
     * 切换导航
     */
    changeType: function (e) {
      console.log(e.currentIndex)
      if (e.currentIndex !== this.type) {
        this.type = e.currentIndex;
        this.loadend = false;
        this.page = 1;
        this.times = [];
        this.$set(this, 'dataList', []);
        this.getData()
      }


    },
  }
}
</script>

<style scoped lang='scss'>
.details {
  background-color: #fff;
  height: 90rpx;
  width: 100%;
  line-height: 90rpx;
  padding: 8rpx;
}

</style>
